<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <meta content="telephone=no" name="format-detection">
  	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="/invite/css/style.css">
    <link rel="stylesheet" href="/invite/css/index.css">
    <link rel="stylesheet" type="text/css" href="/invite/script/layui/css/layui.css"/>
    <link rel="stylesheet" href="/invite/css/phone.css">
    <script src="/invite/script/fontsize.js"></script>
    <script src="/login/jquery-1.11.3.min.js"></script>
</head>
	<body>
		<div id="app" class="app" >
			<div class="head">
				<img src="/invite/img/zuojiantou.png"/>
				<p class="mailbox">邮箱注册</p>
			</div>
			<p class="title">手机注册</p>
			
			<div class="box">
				<div class="ipt_box">
					<van-field v-model="text" id="invite" placeholder="请输入邀请码" clearable readonly/>
				</div>
				<div class="ipt_box">
					<van-field v-model="user" id="user" placeholder="请输入用户名" clearable >
				</div>
				<div class="ipt_box">
					<van-cell-group  class="iphone">
				        <div class="form_box">
				          <form class="layui-form fr" action="" >
				            <select name="city" lay-verify="">
				              <option >+86</option>
				            </select>
				          </form>
				        </div>
				        <van-field v-model="phone" id="username" type="tel" placeholder="请输入绑定手机号" clearable />
				      </van-cell-group>
				</div>
				<div class="ipt_box">
					<van-field v-model="sms" center  id="code" clearable placeholder="请输入验证码">
					 <van-button slot="button" size="small" type="primary" id="sms_dj" onclick="getcode()">发送验证码</van-button>
					</van-field>
				</div>
				<div class="ipt_box" v-if="lookpassworde==1">
					<van-field v-model="password" id="password" placeholder="请输入6-16位登录密码" clearable right-icon="/invite/img/none.png" @click-right-icon="lokpas"/>
				</div>
				<div class="ipt_box" v-if="lookpassworde==0">
					<van-field type="password" v-model="password" id="password" placeholder="请输入6-16位登录密码" clearable right-icon="/invite/img/look.png" @click-right-icon="lokpas"/>
				</div>
				<div class="ipt_box" v-if="lookpaypass==1">
					<van-field v-model="paypassword" id="paypass" placeholder="请设置支付密码" clearable right-icon="/invite/img/none.png" @click-right-icon="lokpaypas" />
				</div>
				<div class="ipt_box" v-if="lookpaypass==0">
					<van-field type="password" v-model="paypassword" id="paypass" placeholder="请设置支付密码" clearable right-icon="/invite/img/look.png" @click-right-icon="lokpaypas"/>
				</div>
			</div>
			
			
			<div class="btn_box">
				<p class="btn" id="zc">注册</p>
				<p class="down">已有账号？去<span id="down">下载</span></p>
			</div>
		</div>
	</body>
	
	<input type='hidden' name='invite' id="invite_code" value=' {{$invite}} '>
	
<script type="text/javascript" src="/invite/script/vue.min.js"></script>
<script type="text/javascript" src="/invite/script/vant.min.js"></script>
<script type="text/javascript" src="/invite/script/layui/layui.js"></script>
<script type="text/javascript">

	 layui.use('form', function(){
          var form = layui.form;

          //监听提交
          form.on('submit(formDemo)', function(data){
            return false;
          });
          form.on('select()', function(data){
            console.log(data.value);
         });
      });
	var appdata=new Vue({
		  el:"#app",
		  data:{
		  	text:"{{$invite}}",
		  	user:"",
		  	phone:"",
		  	sms:"",
		  	paypassword:"",
		    password:"",
		    lookpassworde:"0",
		    lookpaypass:"0",
		    fs:"1"
		  },
		   methods:{
		   	lokpas(){
		   		if(this.lookpassworde=='0'){
		   			this.lookpassworde='1'
		   		}else{
		   			this.lookpassworde="0"
		   		}
		   	},
		   	 lokpaypas(){
		   		if(this.lookpaypass=='0'){
		   			this.lookpaypass='1'
		   		}else{
		   			this.lookpaypass="0"
		   		}
		   	},
		     showPopup() {
		     this.show = true;
		     },
		     showPopupzc() {
		     this.cz = true;
		     },
		   }
		})

	$(".mailbox").click(function(){
		var invite = $("input[name=invite]").val();
		location.href='/invite/email?invite='+invite;
	})

	
	$("#down").click(function(){
		location.href="/invite/down";
	})

	$("#zc").click(function(){
		var invite = $("#invite_code").val();
		var user = $("#user").val();
		var username = $("#username").val();
		var code = $("#code").val();
		var password = $("#password").val();
		var paypass = $("#paypass").val();

		var str_phone = '/^1[3456789]\d{9}$/';
		if(user == '' || user == undefined){
			layer.msg('请输入用户名');
			return false;
		}
		if(username == '' || username == undefined){
			layer.msg('请输入绑定手机号');
			return false;
		}
		if(!username.match(/^1[3456789]\d{9}$/)){
			layer.msg('请输入正确格式的手机号');
			return false;
		}
	
		if(code == '' || code == undefined){
			layer.msg('请输入6位数字验证码');
			return false;
		}
		if(password == '' || password == undefined){
			alert(password);
			layer.msg('请输入登录密码');
			return false;
		}
		if(paypass == '' || paypass == undefined){
			layer.msg('请输入支付密码');
			return false;
		}
		$.ajax({
			url:"/api/user/register",
			type:'post',
			async:false,
			data:{
				'invite_code' : invite,
				'user' : user,
				'username' : username,
				'type':1,
				'password' : password,
				'paypass' : paypass,
				'code': code
			},
			success:function(data){
				layer.msg(data['msg']);
			},
		})
	})


	function  getcode(){
		var username = $("#username").val();
		if(!username.match(/^1[3456789]\d{9}$/)){
			layer.msg('请输入正确格式的手机号');
			return false;
		}
      	if(appdata.fs==0){
	        return;
	    }
		$.ajax({
		    url:"/api/user/send_code",    //请求的url地址
		    dataType:"json",   //返回格式为json
		    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
		    data:{ 
				username:username,
	            area_code:'+86',
	            flag:"1",
	            type:'1'
	        },    //参数值
		    type:"POST",   //请求方式
		    error:function(){
		        //请求出错处理
		    },
	        success:function(msg){
		      if(msg['code'] != 0){
	            daojishi();
	          }
	          layer.msg(msg['msg']);

	        },
		});
	}

    // 倒计时
    function daojishi(){
        appdata.fs=0
        var clock = '';
        nums = 60;
        var btn=document.getElementById("sms_dj");

        $("#sms_dj").removeAttr("onclick");//将按钮置为不可点击
        $("#sms_dj").text(nums+'s')
        clock=setInterval(function(){
	        nums--;
	        if(nums > 0){
	        	$("#sms_dj").text(nums+'s')
	        }else{
	            appdata.fs=1
	            clearInterval(clock);
	            $("#sms_dj").text('重新发送')
	            $("#sms_dj").attr('onclick','getcode()');
	        }
        }, 1000); //一秒执行一次
    }
</script>
</html>
